<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            margin: 0 30px;
        }
    </style>
</head>
<body>
    <script>
        // 1. 将以下数据渲染为六个按钮
        const data = [
            {
                name: '苹果',
                id: 0,
            },
            {
                name: '香蕉',
                id: 1,
            },
            {
                name: '梨',
                id: 2,
            },
            {
                name: '草莓',
                id: 3,
            },
            {
                name: '橘子',
                id: 4,
            },
            {
                name: '葡萄',
                id: 5,
            },
        ];
        // 2. 疯狂点击每个按钮
        // 3. 统计点击次数最多的三个水果

        // ⭐
        for (const item of data) {
            item.count = 0;
            const el = document.createElement('button');
            el.innerText = item.name;
            el.addEventListener('click', function () {
                item.count++;
                const res = data
                    // 按点击次数从大到小排序
                    .sort((a, b) => b.count - a.count)
                    // 得到排序后的水果名字
                    .map(d => d.name)
                    // 截取到点击次数最多的三个水果
                    .slice(0, 3);
                el.innerText = item.name + item.count;
                console.log(res);
            })
            document.body.appendChild(el);
        }
    </script>
</body>
</html>